const goodsList = [
    {
      name: '深船型两带式可外穿软弹拖鞋',
      price: 289.9,
      picture: 'https://yanxuan-item.nosdn.127.net/52fdcb0012a0939fc4d92c1e04fccda8.jpg',
      count: 2,
      attr: { color: '白色',size:'女S（35-36）' }
    },
    {
      name: '智能温控细嘴流速刚刚好咖啡手冲壶电热水壶',
      price: 149,
      picture: 'https://yanxuan-item.nosdn.127.net/fc266553a5b00280ab835e83a660ef14.jpg',
      count: 3,
      attr: {  color: '黑色',size: '600ml' } 
    },
    {
      name: '德国百年工艺高端水晶玻璃红酒杯2支装',
      price: 149,
      picture: 'https://yanxuan-item.nosdn.127.net/8896b897b3ec6639bbd1134d66b9715c.jpg',
      count: 1,
      attr: { color: '白色', size: '波尔多红酒杯双杯' } 
    },
    {
      name: '中段精华，银鳕鱼切片200g',
      price: 109,
      picture: 'https://yanxuan-item.nosdn.127.net/6aaff130c1d97c60f9931e00734bbad6.png',
      count: 1,
      attr: { color: '紫色',  size: '200g*1包 '},
    }
  ]


  // 1.渲染图片 标题 颜色 价格 等数据
     // 2.实现单价 和 小计
  // 3.实现总价
// 封装渲染页面的方法
function render() {
    const num1 = goodsList.reduce(function(result,item){
        return result + item.count
    },0)
const num =goodsList.reduce(function(result,item){
return result + (item.price*100)*item.count
},0)/100
//渲染购物车显示数量
document.querySelector('.em').innerHTML=num1
//渲染总价格
const myMoney =document.querySelector('.money')
myMoney.innerHTML =`￥${num}`
//渲染购物车件数
const myPice=document.querySelector('.pice')
myPice.innerHTML=`共${num1}件商品`
    document.querySelector('.list').innerHTML =goodsList.map((item,index)=> {
        return `
    <div class="item">
    <a href="">
    <img src="${item.picture}" alt="">
       <div class="center">
       <p class="name">${item.name}</p>
       <p class="attr">${Object.values(item.attr).join(':')}</p>
       </div>
       <div class="right"> 
       <p class="price">${item.price.toFixed(2)}元</p>       
       <p class="count">x${item.count}</p>        
       <i class="iconfont icon-cuowu" data-index="${item}" data-niaa="niaaa"></i>        
       </div>
  </a>   
  </div>  `   
}).join('')
}
// 渲染页面
render()

